<template>
  <view class="table-box" :style="[styles]">
    <view
      class="tab-head-box"
      :style="{
        gridTemplateColumns: `repeat(${len},1fr)`,
        fontSize: headFont,
        color:headColor,
        background:backgrounds,
      }"
    >
      <view
        class="tab-head"
        v-for="(item, i) in tabHeadList"
        :key="i"
        :style="{ padding, width: widths[i] }"
      >
        {{ item }}
      </view>
    </view>
    <view
      class="tab-body"
      :style="{ gridTemplateColumns: `repeat(${len},1fr)`, fontSize: bodyFont }"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  defineProps,
  provide,
  watch,
  computed,
  getCurrentInstance,
  unref,
  toRefs,
  reactive,
  ref,
} from "vue";
import propsMxin from '../mixins/props/index'
const { proxy } = getCurrentInstance() as any;

const props = defineProps({
  ...propsMxin.props,
  list: {
    type: Array,
    default: () => [],
  },
  radius: {
    type: String,
    default: "24rpx",
  },
  border: {
    type: String,
    default: "",
  },
  padding: {
    type: String,
    default: "16rpx",
  },
  height: {
    type: String,
    default: "66rpx",
  },
  headColor: {
    type: String,
    default: "",
  },
  color:{
    type: String,
    default: "",
  },
  headFont: {
    type: String,
    default: "24rpx",
  },
  bodyFont: {
    type: String,
    default: "24rpx",
  },
  stripe: {
    type: Boolean,
    default: true,
  },
  background:{
    type: String,
    default: "",
  }
});

let state = reactive({
  tabHeadList: [],
  len: 0,
});
const { tabHeadList, len } = toRefs(state);
const widths = ref([]);
watch(
  () => "$children",
  () => {
    proxy.$nextTick(() => {
      state.tabHeadList = proxy.$children.map((v: any) => {
        return v.label;
      });
      widths.value = proxy.$children.map((v: any) => {
        return proxy.$rpxunit(v.width);
      });
      state.len = state.tabHeadList.length;
    });
  },
  {
    immediate: true, // 立即触发一次
    deep: true, // 深度监听
  }
);
const backgrounds = computed(() => {
  console.log(proxy.$color,'proxy.$color')
  return props.background || proxy.$color.theme.tableBackground
});
const colors = computed(() => {
  return props.color || proxy.$color.theme.tableColor
});
const styles = computed(() => {
  return {
    border:`2rpx solid ${backgrounds.value}`,
    borderRadius:props.radius
  }
});
provide("tableData", reactive({ ...props,backgrounds,colors }));
</script>

<style lang="less" scoped>
.table-box {
  overflow: hidden;
  border:2px solid #f7f7f7;
  .tab-head-box {
    display: grid;
    background: #f7f7f7;
    color:#999;

    .tab-head {
      display: flex;
      align-items: center;
      justify-content: center;
      // border-right: 2px solid #f8f8f8;
    }

    .tab-head:nth-last-child(1) {
      // border-right: none;
    }
  }

  .tab-body {
    display: grid;
  }
}

// /deep/ gg-column {
//   border-top: 2rpx solid #f8f8f8;
//   border-right: 2rpx solid #f8f8f8;
// }

// /deep/ gg-column:nth-last-child(1) {
//   border-right: none;
// }
</style>
